<template>
  <view
    :class="[ns.b(), ns.b(typeClass), ns.m(codeName), sysCssName]"
    :style="inlineStyle"
  >
    <slot></slot>
  </view>
</template>
<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: "shared"
  }
}
</script>
<script setup lang="ts">
import { isNil } from "ramda";
import { useNamespace } from "@/use";
import { IControlContainer } from "@ibiz/model-core";
import { CSSProperties, reactive } from "vue";
import { IViewLayoutPanelController } from "@ibiz-template/runtime";
import { controlBaseProps } from './i-biz-control-base';

const props = defineProps(controlBaseProps);

const ns = useNamespace("control");
const { controlType, sysCss, codeName } = props.controller!.model;
const typeClass = controlType!.toLowerCase();
const sysCssName = sysCss?.cssName;
const model = props.controller!.model;

/** 子部件模型 */
const controls = (props.controller!.model as IControlContainer).controls;

const onLayoutPanelCreated = (controller: IViewLayoutPanelController): void => {
  props.controller!.setLayoutPanel(controller as IViewLayoutPanelController);
};

const inlineStyle = reactive<CSSProperties>({});
// 非导航栏时才输出宽高
if (model.controlType!.endsWith("EXPBAR") === false) {
  if (!isNil(model.width)) {
    if (model.width > 0 && model.width <= 1) {
      inlineStyle.width = `${model.width * 100}%`;
    } else {
      inlineStyle.width = `${model.width}px`;
    }
  }
  if (!isNil(model.height)) {
    if (model.height > 0 && model.height <= 1) {
      inlineStyle.width = `${model.height * 100}%`;
    } else {
      inlineStyle.height = `${model.height}px`;
    }
  }
}
</script>
<style lang="scss">
@include b(control) {
  width: 100%;
  height: 100%;
}
</style>
